<html>
  <head>
    <title>尺寸单位</title>
  </head>
  <body>
    <script>
      /*
          二、尺寸单位

               1、 uni-app 支持的通用 css 单位包括 px、rpx

                      ①、px 即屏幕像素

                      ②、rpx 即响应式 px，一种根据屏幕宽度自适应的动态单位。

                                以 750 宽的屏幕为基准，750rpx 恰好为屏幕宽度。
                                
                                屏幕变宽，rpx 实际显示效果会等比放大，
                                
                                但在 App（vue2 不含 nvue） 端和 H5（vue2） 端屏幕宽度达到 960px 时，默认将按照 375px 的屏幕宽度进行计算，具体配置参考：rpx 计算配置 。

               2、vue 页面支持下面这些普通H5单位，但在 nvue 里不支持。

                       ①、rem 根字体大小可以通过 page-meta 配置抖音小程序和飞书小程序：  

                                屏幕宽度/20、百度小程序：16px、支付宝小程序：50px

                       ②、vh  Viewpoint height ,视窗高度， 1vh 等于视窗高度的1%

                       ③、vw  viewpoint width, 视窗宽度， 1vw 等于视窗宽度的1%

               nvue 还不支持百分比单位。

               App 端，在 pages.json 里的 titleNView 或页面里写的 plus api 中涉及的单位，只支持 px。注意此时不支持 rpx

               nvue 中， uni-app 模式 可以使用 px、rpx， 表现与 vue 中基本一致，另外启用 dynamicRpx 后可以适配屏幕大小变化而变化。

               weex模式目前遵循 weex的单位，它的单位比较特殊：

                      ①、px：， 以750宽的屏幕为基准动态计算的长度单位，与 vue页面中的 rpx 立减相同。
                               (一定要注意 weex 模式的px，和vue里的px逻辑不一样)

                      ②、wx：  与设备屏幕宽度无关的长度单位，与 vue 页面中的 px 理念相同。

                 

                3、rpx的详细说明

                      设计师在提供设计图时，一般只提供一个分辨率的图。

                      严格按设计图标注的px做px做开发，在不同宽度的手机上界面很容易变形。

                      而且主要是宽度变形。高度一般因为有滚动条，不容易出问题。

                      由此，引发了较强的动态宽度单位需求。

                      微信小程序设计了 rpx 来解决这个问题。 
                      
                      uni-app 在 App 端、H5端都支持了 rpx,并且可以配置不同屏幕宽度的计算方式，具体参考： rpx计算配置。

                      rpx 是相对于基准宽度单位，可以根据屏幕宽度进行自适应。  uni-app规定屏幕的基准宽度为 750 rpx。
                      
                      开发者可以通过设计稿基准宽度计算页面rpx值，设计稿 1px  与框架样式1rpx转换公式如下：

                                  "设计稿 1px / 设计稿基准宽度 = 框架样式 1rpx /750rpx"

                      换言之，页面元素宽度在 uni-app 中的宽度计算公式：

                                   "750 * 元素在设计稿中的宽度 / 设计稿基准宽度"

                      注意：

                          ①、注意 rpx 是和宽度相关的单位，屏幕越宽，该值实际像素越大。
                             如不想根据屏幕宽度缩放，则应该使用 px 单位。

                          ②、如果开发者在字体或高度中也使用了 rpx ，那么需注意这样的写法意味着随着屏幕变宽，
                             字体会变大、高度会变大。如果你需要固定高度，则应该使用 px 。

                          ③、rpx 不支持动态横竖屏切换计算，使用 rpx 建议锁定屏幕方向

                          ④、设计师可以用 iPhone6 作为视觉稿的标准。

                          ⑤、如果设计稿不是 750px，HBuilderX 提供了自动换算的工具，详见：HBuilderX中自动转换px为upx。

                          ⑥、App 端，在 pages.json 里的 titleNView 或页面里写的 plus api 中涉及的单位，只支持 px，不支持 rpx

                          ⑦、早期 uni-app 提供了 upx ，目前已经推荐统一改为 rpx 了，详见
      */
    </script>
  </body>
</html>